<template>
  <el-button
    v-if="btnText && !$slots.btn"
    :type="btnType"
    :style="btnStyle"
    :icon="icon"
    :text="isText"
    :link="isLink"
    :disabled="btnDisabled"
    :size="btnSize"
    :title="btnTitle"
    :class="btnClass"
    @click.stop.prevent="validRender"
    >{{ btnText }}</el-button
  >
  <span v-if="$slots.btn" @click="validRender"><slot name="btn"></slot></span>
  <el-dialog
    ref="dialogRef"
    v-bind="$attrs"
    v-model="isShow"
    :width="width"
    :top="dialogTop"
    :fullscreen="fullscreen"
    :append-to-body="appendToBody"
    :close-on-click-modal="closeOnClickModal"
    :title="title"
    @open="opened"
    @close="close"
  >
    <template #header>
      <slot name="title" />
    </template>
    <slot />
    <template #footer>
      <div v-if="isHandleButton">
        <el-button @click="closeDialog">关闭</el-button>
        <slot name="extra-button" />
        <el-button type="primary" :disabled="submitLoading" class="submit-btn" @click="submit">{{
          submitText
        }}</el-button>
      </div>
      <slot name="footer"></slot>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, nextTick } from 'vue'
const $props = defineProps({
  btnTitle: {
    type: String,
    default: ''
  },
  width: {
    type: String,
    default: '800px'
  },
  isText: {
    type: Boolean,
    default: false
  },
  isLink: {
    type: Boolean,
    default: false
  },
  isHandleButton: {
    type: Boolean,
    default: true
  },
  isWaterMark: {
    type: Boolean,
    default: true
  },
  submitText: {
    type: String,
    default: '提交'
  },
  appendToBody: {
    type: Boolean,
    default: true
  },
  fullscreen: {
    type: Boolean,
    default: false
  },
  icon: {
    type: String,
    default: ''
  },
  title: {
    type: String,
    default: ''
  },
  btnDisabled: {
    type: Boolean,
    default: false
  },
  btnClass: {
    type: String,
    default: ''
  },
  btnText: {
    type: [String, Number],
    default: ''
  },
  btnType: {
    type: String,
    default: 'primary'
  },
  btnStyle: {
    type: Object || String,
    default() {
      return {}
    }
  },
  btnSize: {
    type: String,
    default: ''
  },
  dialogTop: {
    type: String,
    default: '60px'
  },
  isValidRender: {
    type: Boolean,
    default: false
  },
  validRenderFun: {
    type: Function,
    default() {
      // eslint-disable-next-line @typescript-eslint/no-empty-function
      return () => {}
    }
  },
  submitLoading: {
    type: Boolean,
    default: false
  },
  closeOnClickModal: {
    type: Boolean,
    default: false
  }
})
const isShow = ref(false)
const dialogRef = ref()
const $emit = defineEmits(['open', 'submit', 'close', 'opened'])
const validRender = () => {
  if ($props.isValidRender) {
    const { validRenderFun } = $props
    validRenderFun().then(() => {
        open()
      })
  } else {
    open()
  }
}

const open = () => {
  isShow.value = true
  $emit('open')
}

const submit = () => {
  $emit('submit', closeDialog)
}
const close = () => {
  $emit('close')
}
const opendDialog = () => {
  isShow.value = true
}
const closeDialog = () => {
  // dialogRef.value.handleClose()
  isShow.value = false
}
const opened = () => {
  nextTick(() => {
    $emit('opened')
  })
}
defineExpose({ closeDialog, opendDialog })
</script>
<script lang="ts">
export default { name: 'EditDialog' }
</script>

<style scoped>
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>
